<!-- 添加成员 -->
<template>
  <div id="NewFriend">
    <!-- 头部 -->
    <Head BackType1="true" hasnotice="true" title="新朋友"></Head>
    <div id="NewFriendMain">
      <nothing v-show="!hasInfo" nothing="暂时没有要添加的好友"></nothing>
      <Search placeholder="根据账号查找好友" jump='/AddFriend'></Search>
      <div class="AddFriends" v-show="hasInfo">
        <!-- 好友列表 盒子开始 -->
        <div id="FriendsBox">
          <div class="FriendsLetter">近三天</div>
          <div
            class="FriendsList"
            v-for="(item,index) in newFriendList.recently"
            :key="index"
            @click="GotoNewFriendInfo(index,'recently')"
          >
            <div class="FriendsMain BoxActive">
              <img alt :src="item.pic">
              <div class="FriendsMainBox">
                <div class="Name">{{item.nickname}}</div>
                <div class="AddName">{{item.notice}}</div>
              </div>
            </div>
            <div v-if="item.useStatus==1" v-on:click.stop.prevent="Accept(item.id)" class="state_no">接受</div>
            <div v-if="item.useStatus==2" class="state_yes">查看</div>
            <div v-if="item.useStatus==3" class="state_yes">已过期</div>
          </div>
        </div>
        <!-- 好友列表 盒子结束 -->
        <!-- 好友列表 盒子开始 -->
        <div id="FriendsBox">
          <div class="FriendsLetter">三天以上</div>
          <div
            class="FriendsList"
            v-for="(item,index) in newFriendList.longTime"
            :key="index"
            @click="GotoNewFriendInfo(index,'longTime')"
          >
            <div class="FriendsMain BoxActive">
              <img alt :src="item.pic">
              <div class="FriendsMainBox">
                <div class="Name">{{item.nickname}}</div>
                <div class="AddName">{{item.notice}}</div>
              </div>
            </div>
            <div v-if="item.useStatus==1" v-on:click.stop.prevent="Accept(item.id)" class="state_no">接受</div>
            <div v-if="item.useStatus==2" class="state_yes">查看</div>
            <div v-if="item.useStatus==3" class="state_yes">已过期</div>
          </div>
        </div>
        <!-- 好友列表 盒子结束 -->
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
import Head from "@/components/Head";
import nothing from "@/components/nothing";
import { Dialog } from 'vant';
export default {
  name: "NewFriend",
  data() {
    return {
      hasInfo: false,
      newFriendList: {}
    };
  },
  components: {
    Search,
    Head,
    nothing,
    [Dialog.name]:Dialog,
  },
  mounted() {
    /**
    * 新朋友列表
    * useStatus：申请状态 1:未应答，2:已同意，3:过期
    * recently:最近好友申请;longTime:3天前好友申请
    */
    this.$get(urlConfig.newFriendsList).then(res => {
      if (res.data.recently.length != 0 || res.data.longTime.length != 0) {
        this.hasInfo = true
        this.newFriendList = res.data;
      }
    });
  },
  methods: {
    GotoNewFriendInfo(index, str) {
      console.log(this.newFriendList.recently[index].id)
      if (str == "recently") {
        this.$router.push({
          path: "/NewFriendInfo",
          query: { 
            id: this.newFriendList.recently[index].id,
            personStatus: 2
          }
        });
      } else {
        this.$router.push({
          path: "/NewFriendInfo",
          query: { 
            id: this.newFriendList.longTime[index].id, 
            personStatus: 2
          }
        });
      }
    },
    Accept(id){
      console.log(id)
      Dialog.confirm({
        title: '提示',
        message: '是否添加该成员为你的IM好友'
      }).then(() => {
        /**
        * 同意好友申请
        */
        var idtext={
            id:id,
        }
        console.log(idtext)
        this.$post(urlConfig.updateApplication,idtext)
          .then(res => {
          
        })
      }).catch(() => {
        // on cancel
      });
      
    }
  }
};
</script>

<style scoped lang='less'>
#NewFriend {
  font-size: 28px;
  #NewFriendMain {
    position: fixed;
    top: 88px;
    overflow: scroll;
    z-index: 10;
    .AddFriends {
      margin-top: 10px;
      .FriendsLetter {
        height: 60px;
        line-height: 60px;
        padding: 0 30px;
        font-size: 24px;
        color: #8c8c8c;
      }
      .FriendsList {
        background: #fff;
        position: relative;
        .FriendsMain {
          height: 110px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          border-bottom: 1px solid #e8e8e8;
          padding: 0 30px;
          img {
            width: 80px;
            height: 80px;
          }
          .FriendsMainBox {
            width: 475px;
            .Name {
              height: 24px;
              padding-top: 30px;
            }
            .AddName {
              padding-top: 15px;
              color: #999;
              font-size: 22px;
              height: 40px;
            }
          }
          
          &:last-child {
            border-bottom: 0px;
            height: 110px;
          }
        }
        .state_no {
          position: absolute;
          right: 30px;
          top: 30px;
          width: 95px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          color: #5ab574;
          background: #ededed !important;
          &:active {
            z-index: 9999999;
            background: #f5f5f5 !important;
            display: block;
          }
        }
        .state_yes {
          position: absolute;
          right: 30px;
          top: 30px;
          color: #999;
          width: 95px;
          height: 60px;
          text-align: center;
          line-height: 60px;
        }
      }
    }
  }
}
</style>
